<template>
    <CodeEditor v-model="code" :options="{ readOnly: true }" />
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';

import useEditorStore from '@/store/modules/editor';
import { useCompileCode } from '@/components/CodeEditor/hooks';

defineOptions({
    name: "Code"
});

const editorStore = useEditorStore();
const { compileCode } = useCompileCode()
const code = ref('');

const handleCompileCode = async () => {
    code.value = await compileCode(editorStore.currentComponent!);
}

onMounted(handleCompileCode);

watch(()=>editorStore.currentComponent, handleCompileCode);
</script>
<style scoped lang="scss">

</style>